<template>
<div class="box">
    <div class="title">{{title}}</div>

    <float-icons padding="10 0 60 0" class="icons-warp">
        <div class="float-icon-item">
            <img src="../../../assets/dargIcon/back.png" alt="" @click="handleIcons('/home')" />
            <span>返回</span>
        </div>
     
    </float-icons>

    <div class="item">

        <div class="flex1">
            <p>
                <span class="name">顾客姓名:</span>
                <span class="value">{{list.customer_name||""}}</span>
            </p>

             <p>
                <span class="name">活动名称:</span>
                <span class="value">{{list.act_name||""}}</span>
            </p>

             <p>
                <span class="name">礼品名称:</span>
                <span class="value">{{list.item_name||""}}</span>
            </p>

             <p>
                <span class="name">提交时间:</span>
                <span class="value">{{list.create_time||""}}</span>
            </p>
        </div>
        <div class="flex1" style="margin-left:5px">
              <p>
                <span class="name">顾客卡号:</span>
                <span class="value">{{list.card_no||""}}</span>
            </p>

             <p>
                 <van-button size="small" type="info" block class="btn-style" @click="lookCode()">查看二维码</van-button>
            </p>

             <p>
                <span class="name">礼品状态:</span>
                <span v-if="list.status == 0"  class="value"> 已提交 </span>
                <span v-if="list.status == 1"  class="value"> 已核销 </span>
                <span v-if="list.status == 2"  class="value"> 已作废 </span>
            </p>

             <p>
                <span class="name">核销时间:</span>
                <span class="value">{{list.update_time||""}}</span>
            </p>
        </div>

      
    </div>


   
    <van-dialog @close=close v-model="show" title="礼物码" show-cancel-button>
        <div ref="qrCodeUrl"></div>

    </van-dialog>




</div>
</template>

<script>
import QRCode from "qrcodejs2";
import FloatIcons from '@/components/s-icons'
import { isbind } from '../../isCheckBind.js'
import {
    getGiftCode
} from "../../../sgApi/index.js"
import {
    toast
} from '../../../utils/toast.js'
export default {
    name: "giftCode",
    components: {
        FloatIcons
    },
    data() {
        return {
           title:"广州曙光25周年庆敢晒就敢送",
           list:
             {
                customer_name:'',
                act_name:'',
                item_name:'',
                create_time:'',

                card_no:'',
                status:"",
                update_time:""
             }
           ,
           show:false
         
        }
    },
    mounted() {
        isbind()
        this.getData()
    },
  
   
    methods: {
       lookCode(){
       
        this.show=true
        setTimeout(()=>{
            this.creatQrCode()

        },160)
      
       },
       close(){
          this.$refs.qrCodeUrl.innerHTML = ''
       },

        handleIcons(id) {
             this.$router.replace({
                path:"/giftCheck"
            })
         
        },
        getData(){
        //    https://app.gzsg.cn/sgmx/activity/activityList?hosId=1&customerId=20181208113409024000&act_id=1

        // /sgmx/activity/activityList?hosId=1&"+"customerId="+data.customerId+"&act_id="+data.act_id

        console.log("route",this.$route.query)
          let data= {
            customerId:localStorage.getItem("customerCrmId"),
            act_id:this.$route.query.act_id
          }
           getGiftCode(data).then(res=>{
            console.log("res1",res)
               this.list=res.data.length>0 ? res.data[0] :{
                    customer_name:'',
                    act_name:'',
                    item_name:'',
                    create_time:'',
                    card_no:'',
                    status:"2",
                    update_time:""
               }

               

           })







        },
        creatQrCode() {
            this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
                text: "a=123&b=234", // 需要转换为二维码的内容
                width: 130,
                height: 130,
                colorDark: "#000000",
                colorLight: "#ffffff",
                // correctLevel: QRCode.CorrectLevel.H
            });
        }


      
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    padding-top: 12px;

     .title{
        text-align: center;
        font-size: 16px;
        font-weight: 600;
    }

    .item{
        width: 90%;
        // height: 60px;
        background-color: #ffffff;
        margin-top: 15px;
        border-radius: 6px;
        margin-left: 5%;
        box-shadow:#ccc 1px 1px 1px 1px;
        padding-left: 12px;
        padding-right: 12px;
        padding-top: 8px;
        padding-bottom: 8px;
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex-direction: row;

        .flex1{
            flex: 1;
        }

        .name{
            font-size: 14px;
            color: #bebaba;

        }
        .value{
            font-size: 14px;
            margin-left: 8px;
            color: #777373;
        }

        .selectBox{
            width: 30px;
            height: 30px;
            // background-color: aqua;
            position: absolute;
            right: 16px;
            top:40px
        }

        
    }

      .icons-warp {
        // border-radius: 25px;
        border-radius: 25px 0 0 25px;

        .float-icon-item {
            display: flex;
            flex-direction: row;
            // padding-left: 14px;
            // padding-right: 14px;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 80px;
            height: 40px;

            img {
                width: 25px;
                height: 25px;
                margin-bottom: 3px;
            }

            span {
                margin-left: 5px;
                font-size: 12px;
                color: #666666;
            }
        }
    }
    
    /deep/ .van-dialog__content{
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-bottom: 20px;
        padding-top: 20px;
    }


 

}
</style>
